<template>
	<view class="shipped-page">
		<NavBar :title="pageType=='all'?'全部发货':'分批发货'"/>
		<view class="goods-list" v-if="pageType=='part'">
			<view class="goods-item th flex-center">
				<view class="name"> 商品名称 </view>
				<view class="num"> 商品总数 </view>
				<view class="num2"> 待提交 </view>
			</view>
			<view class="goods-item flex-center" v-for="item in partInfo" :key="item.sku">
				<view class="name"> {{ item.name }} </view>
				<view class="num"> {{ item.quantity }} </view>
				<view class="num2">
					<wd-input-number v-model="item.quantity2" :min="0" :max="item.max" />
				</view>
			</view>
		</view>
		<wd-form ref="formRef" :model="formData">
			<wd-picker
			  label="物流"
			  placeholder="请选择物流公司"
			  label-width="100px"
			  prop="wuliu_id"
				value-key="id"
				label-key="name"
			  v-model="formData.wuliu_id"
			  :columns="expressList"
				:rules="[{ required: true, message: '请选择物流公司' }]"
			/>
		  <wd-input
		    label="物流单号"
		    label-width="100px"
		    prop="wuliu_no"
		    v-model="formData.wuliu_no"
		    placeholder="请输入物流单号"
		    :rules="[{ required: true, message: '请填写物流单号' }]"
		  />
			<wd-calendar
				label="预计送达时间"
				label-width="100px"
				placeholder="请选择日期"
				prop="yuji_time"
				v-model="formData.yuji_time"
				:rules="[{ required: true, message: '请选择物流日期' }]"
			/>
			<wd-cell required title="是否有费用清单" title-width="120px" center>
			  <wd-switch v-model="formData.type" active-value="1" inactive-value="0" />
			</wd-cell>
			<template v-if="formData.type==1">
				<wd-cell required title="币种" title-width="40px" center>
					<wd-radio-group v-model="formData.currency" shape="dot" inline>
						<wd-radio value="1"> 人民币 </wd-radio>
						<wd-radio value="2"> 卢布 </wd-radio>
						<wd-radio value="3"> 美元 </wd-radio>
						<wd-radio value="4"> usdt </wd-radio>
					</wd-radio-group>
				</wd-cell>
				<wd-input
					label="金额"
					label-width="100px"
					prop="money"
					type="number"
					v-model="formData.money"
					placeholder="请输入金额"
					:rules="[{ required: true, message: '请填写金额' }]"
				/>
				<wd-cell title="备注" title-width="100px" prop="remark">
					<wd-textarea v-model="formData.remark" placeholder="请填写备注" />
				</wd-cell>
			</template>
		</wd-form>
		<view class="btn-box justify-center">
			<wd-button class="btn" type="info" @tap="cancel"> 取 消 </wd-button>
			<wd-button class="btn" @tap="submit"> 确 认 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { expressListApi, shippedApi, partShippedGetApi } from '@/api'
	import { useUserStore } from '@/store'
	import { formatter } from '@/utils'
	const pageType = ref('')
	const expressList = ref([])
	const formRef = ref()
	const formData = ref({
		no: '',
		wuliu_id: '',
		wuliu_no: '',
		yuji_time: null,
		type: '1',
		currency: '1',
		money: '',
		remark: ''
	})
	const submit = () => {
		const { userInfo } = useUserStore()
		formRef.value.validate().then(({ valid }) => {
			if(valid) {
				// 全部发货：supply/allverify; 分批发货：'supply/noallverify'
				let path = 'supply/allverify'
				const params = {
					...formData.value,
					yuji_time: formatter(formData.value.yuji_time)
				}
				if(pageType.value == 'part') {
					path = 'supply/noallverify'
					params.data = partInfo.value
				}
				shippedApi(path, params).then(res => {
					uni.showToast({ icon: 'none', title: '提交成功' })
					uni.navigateBack()
				}).catch(err => {
					uni.showToast({ icon: 'none', title: err.msg })
				})
			}
		})
	}
	// 获取物流公司
	const getExpressList = () => {
		expressListApi().then(res => {
			expressList.value = res
		}).catch(err => {
			uni.showToast({ icon: 'none', title: '获取物流公司列表失败' })
		})
	}
	// 获取分批发货订单信息
	const partInfo = ref([])
	const getPartShippedInfo = (no) => {
		partShippedGetApi({no}).then(res => {
			partInfo.value = res
			partInfo.value.forEach(item => {
				item.quantity2 = Number(item.quantity) - Number(item.submit)
				item.max = Number(item.quantity) - Number(item.submit)
			})
		})
	}
	const cancel = () => {
		uni.navigateBack()
	}
	onLoad((e) => {
		const { type, order_no } = e
		pageType.value = type
		formData.value.no = order_no
		getExpressList()
		if(type == 'part') getPartShippedInfo(order_no)
	})
</script>

<style lang="scss" scoped>
	.shipped-page {
		padding: 20rpx 24rpx;
		padding-bottom: 150rpx;
		.goods-list {
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			background-color: #fff;
			.th {
				background-color: #e5e5e5;
			}
			.goods-item {
				gap: 10rpx;
				text-align: center;
				border: 1px solid #eee;
				padding: 0 10rpx;
				.name, .num, .num2 {
					height: 88rpx;
					line-height: 88rpx;
				}
				.name {
					flex: 1;
					text-align: left;
				}
				.num {
					width: 130rpx;
					border-right: 1px solid #eee;
					border-left: 1px solid #eee;
				}
				.num2 {
					width: 180rpx;
				}
			}
		}
	}
	.wd-textarea {
		padding: 10rpx;
		border-radius: 20rpx;
		border: 1px solid #f8f8f8;
	}
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		gap: 40rpx;
		padding: 20rpx 24rpx;
		background-color: #fff;
		.btn {
			flex: 1;
		}
	}
</style>
